<template>
    <div>
        <Card>
            <p slot="title">
                用户
            </p>
            <!--搜索表单-->
            <Form inline onsubmit="return false">
                <FormItem>
                    <Input v-model="filters.username" placeholder="用户名" @keyup.enter.native="getData(1)"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="getData(1)">搜索</Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="create()">新增</Button>
                </FormItem>
            </Form>
            <!--表格-->
            <Table border stripe :columns="columns" :data="data.records" :loading="loading"></Table>

            <!--分页-->
            <pagination :data="data" :get-data="getData"></pagination>

            <!--新增表单-->
            <systemUserCreateForm ref="systemUserCreateForm" :get-data="getData"></systemUserCreateForm>

            <!--编辑表单-->
            <systemUserUpdateForm ref="systemUserUpdateForm" :get-data="getData"></systemUserUpdateForm>

            <!--充值表单-->
            <rechargeForm ref="rechargeForm" :get-data="getData"></rechargeForm>

            <!--项目表单-->
            <systemUserProjectForm ref="systemUserProjectForm" :get-data="getData"></systemUserProjectForm>

        </Card>

    </div>
</template>

<script>
    import api from '../../api';
    import pagination from '../components/pagination';
    import systemUserCreateForm from './createForm';
    import systemUserUpdateForm from './updateForm';
    import systemUserProjectForm from './projectForm';
    import rechargeForm from './recharge';
    import cookie from 'js-cookie';

    export default {
//        分页和编辑
        components: {pagination, systemUserCreateForm, systemUserUpdateForm, rechargeForm, systemUserProjectForm},
        data () {
            return {
                loading: true,
                filters: {
                    username: ''
                },
                columns: [
                    {
                        key: 'username',
                        title: '用户名'
                    },
                    {
                        key: 'roleName',
                        title: '角色'
                    },
                    {
                        key: 'telephone',
                        title: '手机号'
                    },
                    {
                        key: 'projectName',
                        title: '项目名称'
                    },
                    {
                        key: 'status',
                        title: '状态',
                        render: (h, params) => {
                            return h('span', params.row.status === 0 ? '启用' : '禁用');
                        }
                    },
                    // {
                    //     key: 'balance',
                    //     title: '余额'
                    // },
                    // {
                    //     key: 'packageGroupName',
                    //     title: '套餐组'
                    // },
                    {
                        title: '操作',
                        render: (h, params) => {
                            return h('div', [
                                this.renderEditButton(h, params),
                                this.renderDeleteButton(h, params),
                                this.renderProjectButton(h, params)
                            ]);
                        }
                    }
                ],
                data: {}
            };
        },
        methods: {
            // 获取列表数据
            getData (current, size) {
                if (current) this.filters.current = current;
                if (size) this.filters.size = size;

                api.systemUserIndex(this.filters).then(data => {
                    this.loading = false;

                    if (data.code === 0) {
                        this.data = data.data;
                    }
                });
            },
            // 打开新增Modal
            create () {
                this.$refs.systemUserCreateForm.open('新增');
            },
            // 删除
            destroy (id) {
                api.systemUserDelete({id: id}).then(data => {
                    if (data.code === 0) {
                        this.getData();
                    }
                });
            },
            // 渲染表格编辑按钮
            renderEditButton (h, params) {
                return h('Button', {
                    style: {
                        marginRight: '5px'
                    },
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    on: {
                        click: () => {
                            // 打开编辑Modal
                            this.$refs.systemUserUpdateForm.open('编辑', params.row.id);
                        }
                    }
                }, '编辑');
            },
            // 渲染表格编辑按钮
            renderProjectButton (h, params) {
                return h('Button', {
                    style: {
                        marginRight: '5px'
                    },
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    on: {
                        click: () => {
                            // 打开编辑Modal
                            this.$refs.systemUserProjectForm.open('编辑', params.row.id);
                        }
                    }
                }, '项目管理');
            },
            // 渲染表格删除按钮
            renderDeleteButton (h, params) {
                return h('Poptip', {
                    props: {
                        confirm: true,
                        title: '确定是否删除?',
                        transfer: true
                    },
                    on: {
                        'on-ok': () => {
                            this.destroy(params.row.id);
                        }
                    }
                }, [
                    h('Button', {
                        style: {
                            marginRight: '5px'
                        },
                        props: {
                            type: 'error',
                            placement: 'top',
                            size: 'small'
                        }
                    }, '删除')
                ]);
            },
            rechargeButton (h, params) {
                return h('Button', {
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    on: {
                        click: () => {
                            // 打开编辑Modal
                            this.$refs.rechargeForm.open('充值', [{systemUserId: params.row.id}]);
                        }
                    }
                }, '充值');
            }
        },
        // 初始化
        mounted () {
            this.getData();
        }
    };
</script>
